<template>
  <div class="dialog-content">
    <div class="content-left">
      <el-scrollbar class="content-left-scrollbar">
        <StoreList @select="selectStoreId" />
      </el-scrollbar>
    </div>
    <div class="content-right">
      <GoodsList
        :shop_id="shop_id"
      />
    </div>
  </div>
</template>

<script setup lang='ts'>
  import {reactive, ref, computed, watch, onMounted, provide, toRaw} from "vue"
  import {useRouter, useRoute} from "vue-router"
  import StoreList from './StoreList.vue'
  import GoodsList from './GoodsList.vue'
  import lodash from 'lodash'

  interface Props{
    multiple: boolean
    source: Array<number>
    store_list: Array<number>
    select_goods_list: Array<any>
  }

  const props = withDefaults(defineProps<Props>(),{
    multiple: true,
    source: () => [],
    store_list: () => [],
    select_goods_list: () => []
  })

  provide('multiple', props.multiple)
  provide('source', props.source)
  provide('store_list', props.store_list)
  provide('select_goods_list', props.select_goods_list)
  
  let shop_id = ref<number>(0)

  const selectStoreId = async (id: number) => {
    shop_id.value = id
  }

</script>

<style lang="scss">
  .select-goods-dialog{
    .el-dialog__body{
      padding: 0;
    }
  }
</style>

<style lang="scss" scoped>
  $height: 500px;
  .dialog-content{
    display: flex;
    padding: 8px 0;
    .content-left{
      width: 180px;
      height: $height;
      padding: 0 6px;
      .content-left-scrollbar{
        height: $height;
      }
    }
    .content-right{
      flex: 1;
      height: $height;
      padding: 0 10px;
      border-left: 1px solid #eee;
    }
  }

</style>
